
<template>
  <div class="dashboard-container">
    <el-drawer ref="drawer" size="80%" title="集包详情" :visible.sync="showDialog" :wrapper-closable="true" @close="close">
      <div class="detial">
        <el-table
          ref="multipleTable"
          :data="list"
          height="calc(100vh - 150px)"
          style="width: 100%;"
          size="mini"
          border
          tooltip-effect="dark"
          :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
        >
          <el-table-column
            label="系统订单号"
            width="200px"
            fixed
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.tid }}</span>
              </div>
            </template>

          </el-table-column>
          <el-table-column
            label="主运单号"
            width="150px"
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.first_waybill_no }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="从运单号"
            width="150px"
          >
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.second_waybill_no }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="100px"
          >
            <template slot-scope="{ row }">
              <div>
                <el-tag :type="row.status == 102?'info':row.status == 103?'':row.status == 104?'success':'danger'">{{ row.status == 102?'待取号':row.status == 103?'已取号':row.status == 104?'已发货':'已废弃' }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="用户昵称"
            prop="user.username"
            min-width="150px"
          />
          <el-table-column
            label="客户昵称"
            prop="client.username"
            width="150px"
          />
          <el-table-column
            label="来源单号"
            prop="order_no"
            min-width="150px"
          />
          <el-table-column
            label="收件人"
            prop="receiver.name"
            width="140px"
          />
          <el-table-column
            label="走件渠道"
            prop="channel.name"
            width="240px"
          />
          <el-table-column
            label="货物类型"
            prop="goods_type.name"
            width="140px"
          />
          <el-table-column
            label="大小件"
            prop="currency"
            width="140px"
          >
            <template slot-scope="{ row }">
              <div>
                <span v-if="row.size == 1">小件</span>
                <span v-if="row.size == 2">大件</span>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="订单类型"
            prop="currency"
            width="140px"
          >
            <template slot-scope="{ row }">
              <div>
                <span v-if="row.order_type == 1">仓储</span>
                <span v-if="row.order_type == 2">非仓储</span>
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            label="送货方式"
            prop="currency"
            width="140px"
          >
            <template slot-scope="{ row }">
              <div>
                <span v-if="row.delivery_method == 1">上门取件</span>
                <span v-if="row.delivery_method == 2">自送货物</span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column
            label="快递产品类型"
            prop="currency"
            width="140px"
          >
            <template slot-scope="{ row }">
              <div>
                <span v-if="row.express_type == 1">标快</span>
                <span v-if="row.express_type == 2">特快</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="批次号"
            prop="batch_no"
            width="140px"
          />

          <el-table-column
            label="下单时间"
            prop="created"
            width="140px"
          />
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </div>
      <div class="buttons">
        <el-button
          size="mini"
          type=""
          @click="close()"
        >
          取消
        </el-button>

      </div>

    </el-drawer>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { packageInfo } from '@/api/ware/index'

export default {
  name: 'Detial',
  components: {
    Pagination
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detial: {
      require: false,
      type: Object,
      default: () => {

      }
    },
    status: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        package_no: ''
      },
      total: 0,
      showDialog: false,
      list: []
    }
  },
  watch: {
    visible(val) {
      this.showDialog = this.visible
      if (this.showDialog) {
        this.listQuery.package_no = this.detial.package_no
        this.getList()
      }
    }
  },
  mounted() {

  },
  methods: {
    getList() {
      packageInfo(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.count
      })
    },
    close() {
      this.$emit('update', false)
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    }

  }

}
</script>
<style scoped>
.detial{
  padding:40px 40px 20px 20px;
}
.buttons{
  display: flex;
  flex-direction: row-reverse;
  padding-right: 40px;
}
</style>
